<template>
  <div class="document-detail">
    <header-bar title="任务详情"></header-bar>
    <div class="content-wrapper">
      <div class="content" ref="scroll">
        <group class="group" label-width="5em">
          <h3 slot="title" class="title">
            <div class="icon-wrapper">
              <icon :name="document.icon" :scale="2"></icon>
            </div>
            <span>基本信息</span>
          </h3>
          <cell title="主题:" :value="document.title" value-align="left"></cell>
          <cell title="发布人:" :value="document.author" value-align="left"></cell>
          <cell title="下发人:" :value="document.author" value-align="left"></cell>
          <cell title="时间:" :value="document.posttime" value-align="left"></cell>
          <cell title="任务单号:" :value="document.posttime" value-align="left"></cell>
          <cell title="部门:" :value="document.posttime" value-align="left"></cell>
          <cell title="内容:" :value="document.content" value-align="left" ></cell>
        </group>
          <div class="button">
            <flexbox>
              <flexbox-item>
                <x-button type="default">执行</x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button type="default">下发</x-button>
              </flexbox-item>
            </flexbox>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import {
    Group,
    Cell,
    XTextarea,
    XButton,
    Flexbox,
    FlexboxItem,
    GroupTitle,
  } from 'vux'
  import BScroll from 'better-scroll'
  import HeaderBar from '@/components/HeaderBar'
  export default{
    components: {
      Group,
      Cell,
      XTextarea,
      HeaderBar,
      XButton,
      Flexbox,
      FlexboxItem,
      GroupTitle,
    },
    data(){
      return {
        scroll: null,
        document: {
          title: '2017年12月份工资表审批',
          author: '张舜',
           icon:"circles",
          posttime: '2017-12-31',
          content: '2017年12月份工资表审批,2017年12月份工资表审批,2017年12月份工资表审批',
          comment: ''
        }
      }
    },
    methods: {
      _initScroll() {
        this.scroll = new BScroll(this.$refs.scroll)
      }
    },
    mounted(){
      setTimeout(()=>{
        this._initScroll()
      }, 20)
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';

  .document-detail{
    background-color: @color-background-main;
    .content-wrapper{
      position: absolute;
      top: @height-header-bar;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      .content{
        width: 100%;
        height: 100%;
        overflow: hidden;
        h3.title{
          display: flex;
          align-items: center;
          font-size: @font-size-normal;
          background-color: #fff;
          padding: 8px 0;
          .icon-wrapper{
            display: flex;
            align-items: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            /*background-color: @color-theme-yellow-medium;*/
          }
        }
        .group{
          background-color: #fff;
          .vux-no-group-title {
            .weui-cell { 
              .vux-cell-bd + .weui-cell__ft {
                text-align: left;
                width: 4.5rem;
                color: #999999;
              }
            }
          }
        }
      }
      .button{
        background: #ffba00;
        width: 100%;
        position:absolute; 
        bottom:0px; 
        button.weui-btn, input.weui-btn {
          width: 100%;
          background: #ffba00;
          color: #fff;
          border: none;
        }
        .weui-btn:after {
          border: none;
          border-left: 1px solid #fff;
        }
      }
    }
  }
</style>